<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>会员开通</p>
    </header>

    <form>
        <p>
            <img src="../assets/vip.jpeg" style="width:100%;height:500px;margin-top:50px"/>
        </p>
      <p>
        <textarea >
                开通协议..........
            </textarea
        >
      </p>
      <p>
        <input type="checkbox" id="checkbox" v-model="isChecked"  style="width:28px;height:28px"/>
        <label for="checkbox">我已阅读并同意条款</label>
      </p>
      <p>
        <button :disabled="!isChecked" @click="submitForm" class="c1">
          开通
        </button>
      </p>
    </form>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from "../components/Footer.vue";
export default {
  data() {
    return {
      isChecked: false,
    };
  },
  components: {
    Footer,
  },
  methods: {
    submitForm() {
      // 表单提交逻辑
     this.$router.push({path:'/success'});
    },
  },
};
</script>
<style>

form {

  text-align: center;
  
}
textarea {
  font-size: 28px;
  width: 100%;
  height: 400px;
}

.c1 {
  font-size: 32px;
  font-weight: bold;
  margin-top: 50px;
}
p{
    font-size: 28px;
}
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
